<template>
    <div class="wallet-container">
        <div class="header-title">
            导入钱包
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="官方钱包" name="first">
                <div class="tab-wallet">
                    <textarea placeholder="Keystore文本内容"></textarea>
                    <div class="privacy-tips">
                        <el-checkbox></el-checkbox>
                        我已仔细阅读并同意<a class="go-privacy" @click="goPrivacy()">服务及隐私条款</a>
                    </div>
                    <el-button type="info" class="btn-big btn-top-20">开始导入</el-button>
                    <!--<el-button type="primary" class="btn-big">开始导入</el-button>-->
                </div>
            </el-tab-pane>
            <el-tab-pane label="私钥" name="second">
                <div class="tab-privatekey">
                    <textarea placeholder="明文私钥"></textarea>
                    <div class="form-container-table">
                        <div class="form-item">
                            <label>密码:</label>
                            <div class="col-s-100">
                                <el-input placeholder=""></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <label>重复密码:</label>
                            <div class="col-s-100">
                                <el-input placeholder=""></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <label>密码提示信息:</label>
                            <div class="col-s-100">
                                <el-input placeholder=""></el-input>
                            </div>
                        </div>
                        <div class="privacy-tips">
                            <el-checkbox></el-checkbox>
                            我已仔细阅读并同意<a class="go-privacy" @click="goPrivacy()">服务及隐私条款</a>
                        </div>
                        <el-button type="info" class="btn-big btn-top-20">开始导入</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeName: 'first'
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            goPrivacy(){
                this.$router.push({path: '/home/privacy'})
            }
        }
    };
</script>
<style>
    .wallet-container{
        width: 600px;
        height: auto;
        margin: 0 auto;
    }
    .header-title{
        text-align: center;
        font-size: 15px;
        padding: 40px 0;
    }
    .wallet-container .el-tabs__nav{
       width: 100%;
    }
    .wallet-container .el-tabs__item{
        width: 300px;
        text-align: center;
    }
    .wallet-container .el-tabs__nav-wrap::after{
        height: 0;
    }
    .tab-wallet,tab-privatekey{
        width: 100%;
        margin: 20px 0;
    }
    .tab-wallet textarea, .tab-privatekey textarea{
        width: 100%;
        background: transparent;
        border: 1px #ccc solid;
        border-radius: 5px;
        outline: none;
        height: 260px;
        padding: 20px;
        overflow: hidden;
        resize:none;
    }
    .tab-privatekey textarea{
        height: 160px!important;
    }
    .privacy-tips{
        margin: 20px 0 30px 0;
        font-size: 14px;
    }
    .el-checkbox{
        margin-right: 8px;
    }
    .go-privacy{
        cursor: pointer;
        color: #0061ae;
    }
    .form-container-table{
        margin-top: 10px;
    }
    .form-item{
        margin-bottom: 20px;
    }
    .form-item label{
        display: block;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .form-item .col-s-100 input {
        width: 100%;
        background: transparent;
        font-size: 14px;
    }
    .btn-top-20{
        margin-top: 20px;
    }
</style>